<template>
  <div class="center">
    <header>
      <div>
        <el-image
          style="width: 100px; height: 100px; margin-left: 20px"
          :src="store.state.BaseUrl + store.state.userBase.avatar"
          fit="cover"
        >
        </el-image>
      </div>
      <div class="info">
        <p>{{ store.state.userBase.username }}</p>
        <p class="createTime">
          {{ dayjs(store.state.userBase.createTime - 0).format('YYYY-MM-DD') }}
        </p>
        <p class="email">邮&ensp;箱: &ensp;{{ store.state.userBase.email }}</p>
      </div>
      <BackBtn class="signOut" @click="signOut">退出登录</BackBtn>
    </header>
    <div class="centerInfo">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="编辑信息" name="first">
          <CenterEditor />
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
          <CenterPassword />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, ref, defineAsyncComponent } from 'vue'
import dayjs from 'dayjs'
const activeName = ref('first')
const store: any = inject('store')
// 导入编辑组件
const CenterEditor = defineAsyncComponent(
  () => import('@/components/center/CenterEditor.vue')
)
const CenterPassword = defineAsyncComponent(
  () => import('@/components/center/CenterPassword.vue')
)
// 导入按钮
const BackBtn = defineAsyncComponent(
  () => import('@/components/global/BackBtn.vue')
)
// 退出登录
const signOut = () => {
  store.SetUserBase({})
}
</script>
<style lang="scss">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #fff;
  background: rgba($color: #252c37, $alpha: 0.5);
}

.el-tabs__item {
  color: #fff;
}
</style>
<style lang="scss" scoped>
.center {
  padding-top: 100px;
  max-width: 1200px;
  margin: auto;

  header {
    position: relative;
    display: flex;
    padding-top: 20px;
    height: 150px;
    width: 100%;
    background: #252c37;

    .info {
      p {
        color: #fff;
        font-size: 20px;
        margin: 10px 30px 0;
      }

      .createTime {
        font-size: 14px;
        color: #888;
        margin: 5px 30px;
      }

      .email {
        margin-top: 10px;
        font-size: 16px;
        color: #5788fe;
      }
    }
    :deep(.signOut) {
      position: absolute;
      right: 10px;
      top: 6px;
    }
  }
}

.centerInfo {
  max-width: 1200px;
  margin: auto;
  padding-top: 20px;
}

@media (max-width: 760px) {
  .center {
    padding-top: 50px;

    header {
      height: 100px;
      padding-top: 0px;
      background: transparent;
    }

    :deep(.el-image) {
      margin-left: 10px !important;
      margin-top: 20px;
      width: 80px !important;
      height: 80px !important;
    }
  }
}
</style>
